<template>  
  <div class="layout-container">  
    <div class="header">
      <topZJM></topZJM>
      <topBottomLzm @navigate="toggleView" @returnHome="reset" :key="headerkey"></topBottomLzm>
    </div>  
    <template v-if="showMainContent">
    <div class="top">
      <middleWzy></middleWzy>
    </div>  
    <div class="picture">
      <pictureGrc></pictureGrc>
    </div>  
    <div class="activity"><activeGrc/></div>  
    <!-- <div class="new">Nedddw</div>   -->
    <div class="footer"><footerLzm></footerLzm>
    </div>  
  </template>
  <router-view v-else @toggleView="toggleView" @backHome="reset"></router-view>
  <el-backtop :right="50" :bottom="100"><returnTop></returnTop></el-backtop>
  
  </div>  
</template>  

<script setup>  
import pictureGrc from '@/views/picture-grc/index.vue'
import middleWzy from '@/views/middle-wzy'
import topBottomLzm from '@/views/second-lzm'
import topZJM from '@/views/top-zjm/top.vue'
import returnTop from '@/components/iconBywzy/returnTop.vue'
import footerLzm from '@/views/footer-lzm'
import activeGrc from '@/views/active-grc/index.vue'
import { ref,watch,onMounted  } from 'vue'
import router from '@/router'
import { useRoute } from 'vue-router'
function LocationReload(){
    location.reload()
}
const headerkey=ref(0)
 const showMainContent =ref(true)
 const route =useRoute()
const toggleView=(path)=>{
  showMainContent.value=false
  router.push(path)

}
const reset=()=>{
  showMainContent.value=true
  router.push('/')
}
watch(route, (newRoute) => {
  console.dir('Route changed: ', newRoute.path);
  showMainContent.value = newRoute.path === '/';
});

onMounted(() => {
  console.dir('Mounted: current path is ', route.path);
  showMainContent.value = route.path === '/';
});
</script>  
  
<style scoped lang='scss'>  
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.layout-container {  
  display: flex;  
  flex-direction: column;
  width: 100%;   
  box-sizing: border-box;
  overflow-x: hidden; 
}  
:deep(.layout-container) {
  overflow: hidden;
}
  
.header, .top, .picture, .activity, .new, .footer {  
  width: 100%;  
}  
 
.header{
  background-color: white;
  height: 150px;
}
.top{
background-color: white;
  height: 400px;

}
.picture{
  background-color: #e0e0e058;
  height:1300px;
}
.activity{
background-color: #e0e0e058;
  height: 1000px;
}
.new{
background-color: rgb(153, 255, 127);
  height: 150px;
}   ter{
background-color: rgb(236, 255, 127);
  height: 150px;
} 
 
</style>